<template>
  <div class="EditUser">
    <header class="clear">
      <span>订单查询与编辑</span>
      <!--<div>-->
        <!--<input ref="inputName" type="text" placeholder="输入搜索管理员昵称" />-->
        <!--<button @click="searchAdmins"><i class="iconfont icon-search" /></button>-->
      <!--</div>-->

      <!--<div style="margin-right: 20px">-->
        <!--<input ref="inputAccount" type="text" placeholder="输入搜索管理员账户" />-->
        <!--<button></button>-->
      <!--</div>-->
    </header>
    <Tag :tagList="tags" @indexChange="getOrdersByPage"/>
    <table className="userTable">
      <thead>
      <tr><th>订单ID</th><th>订单类型</th><th>用户</th><th>联系人</th><th>电话</th><th>公司</th><th>卡车数量</th><th>卡车备注</th><th>卸箱数量</th><th>装箱数量</th><th>操作</th><th>操作</th><th>操作</th></tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in ordersList" :key="'user'+item.id">
        <td>{{item.id}}</td>
        <td>未实现</td>
        <td>{{item.email}}</td>
        <td>未实现</td>
        <td>未实现</td>
        <td>未实现</td>
        <td>未实现</td>
        <td>未实现</td>
        <td>未实现</td>
        <td>未实现</td>

        <td><button class="delete" @click="deleteAdmins(item.id)">删除</button></td>
        <td><button class="delete" @click="updateAdmins(item.id)">修改</button></td>
        <td><button class="delete" @click="detailAdmins(item.id)">详情</button></td>
      </tr>
      <tr style="text-align: center" >
        <td colspan="6">
          <i @click="addAdmins" class="el-icon-plus"></i>
        </td>

      </tr>

      </tbody>
    </table>

    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getAllAdmins,getSearchAdmins,deleteAdmins} from '../../api/admin';
  import Tag from '../../components/Tag';
  export default {
    name: 'EditAdmins',
    components:{
      Tag
    },
    computed:{
    },
    data(){
      return{
        tags:['全部','卸箱','混合','装箱'],
        ordersList:[],
        currentPage: 1,// 当前页
        pagesize: 5, // 当前页条目
        total: 5,  // 条目数

        index:0
      }
    },
    mounted(){
      const res = getAllAdmins();
      res
        .then((admins)=>{
          this.ordersList = admins;
        })
        .catch((e)=>{
          alert(e)
        })
    },
    methods:{
      navTo(route){
        this.$router.push(route);
      },
      addAdmins(){
        this.navTo('/backstage/editAdmins/addAdmins')

      },
      updateAdmins(id){
        this.navTo('/backstage/editAdmins/'+id)
      },
      detailAdmins(id){
        this.navTo('/backstage/editAdmins/'+id)
      },
      deleteAdmins(id){
        const res = deleteAdmins(id);
        res
          .then(()=>{
            alert('删除成功');
            this.ordersList.map((item,index)=>{
              if(item.id===id){
                this.ordersList.splice(index,1);
              }
            })
          })
          .catch((e)=>{
            alert(e);
          })
      },
      searchAdmins(){
        const nickname = this.$refs.inputName.value;
        const email = this.$refs.inputAccount.value;

        const res = getSearchAdmins({
          nickname:nickname,
          email:email
        });
        res
          .then((data)=>{
            this.ordersList = data;
          })
          .catch((e)=>{
            alert(e);
          })
      },
      getOrdersByPage(index){
        this.index = index
        const state = index-1; //  -1:全部信息,0:未付款,1:未发货, 2:已发货,3:已完成订单
        const currentPage = this.currentPage; // 第几页
        const pagesize = this.pagesize; // 页中有几条

        const moneyLimit1 = this.$refs.moneyLimit1.value;
        const moneyLimit2 = this.$refs.moneyLimit2.value;
        const goods = this.$refs.goods.value;
        const address = this.$refs.address.value;
        const name = this.$refs.name.value;
        const id = this.$refs.id.value;

        if (moneyLimit1 != ''){
          if (isNaN(moneyLimit1) ){
            alert('金额上限必须为数值类型')
            return
          }
        }
        if (moneyLimit2 != ''){
          if (isNaN(moneyLimit2) ){
            alert('金额下限必须为数值类型')
            return
          }
        }
        if (id != ''){
          if (isNaN(id) ){
            alert('id必须为数值类型')
            return
          }else {
            var _id = id + "";

            if(_id.indexOf(".")==-1){
            }else{
              alert('id必须为整数')
              return
            }
          }
        }


        const res = getOrdersByPage({
          state,
          currentPage,
          pagesize,
          moneyLimit1:moneyLimit1,
          moneyLimit2:moneyLimit2,
          goods:goods,
          address:address,
          name:name,
          id:id
        });
        res.then((data)=>{
          this.orderList = data.orders;
          this.total = data.total;
        })
          .catch((e)=>{
            alert(e);
          })
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/css/var.less";
  .EditUser{
    header{
      width: 100%;
      height: 40px;
      line-height: 40px;
      span{
        float: left;
      }
      div{
        height: 20px;
        float: right;
        input{
          border: none;
          border-bottom: 1px solid #337da4;
          background-color: rgba(0,0,0,0);
          width: 180px;
          padding-left: 10px;
        }
        button{
          position: relative;
          top: -1px;
          border: none;
          background-color: rgba(0,0,0,0);
          i{
            font-size: 17px;
            color:#337da4;
          }
        }
      }
    }
  }
</style>
